<script setup>
import { TagToBlogs } from "@/apis/allAPI/tag"
import { onMounted, ref } from "vue"
import TagChip from "@/components/TagChip.vue"
import TimeLine from "@/components/TimeLine.vue"
import { useRouter } from "vue-router"
const router = useRouter()
const { label } = defineProps({
  label: String,
})
const timeLineData = ref({})
onMounted(() => {
  TagToBlogs(
    label,
    (rData) => {
      timeLineData.value = rData
    },
    () => {
      router.push("/404")
    }
  )
})
</script>

<template>
  <div class="archive-card">
    <div class="tags-wrap">
      <TagChip :index="1" :label="label" :show-remove="false" />
    </div>
    <TimeLine
      v-for="year in Object.keys(timeLineData).reverse()"
      :year="year"
      :blogs="timeLineData[year]" />
  </div>
</template>

<style scoped>
.archive-card {
  background: var(--card-bg);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-radius: var(--border-radius);
  border: 1px solid var(--glass-border);
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: var(--transition);
}

.archive-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
  border-color: rgba(var(--primary-rgb), 0.5);
}

.tags-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  padding: 40px;
}
</style>
